import React, { useState } from 'react';
import { FileText, Download, Eye, Calendar, Filter, Plus } from 'lucide-react';

const Reports = () => {
  const [activeFilter, setActiveFilter] = useState('all');

  const reports = [
    { id: 1, name: '2024年Q1 ESG综合报告', type: 'comprehensive', status: 'published', date: '2024-01-15', size: '2.3MB' },
    { id: 2, name: '12月碳排放月报', type: 'carbon', status: 'draft', date: '2024-01-10', size: '1.1MB' },
    { id: 3, name: '年度社会责任报告', type: 'social', status: 'review', date: '2024-01-08', size: '5.7MB' }
  ];

  return (
    <div className="p-6 max-w-7xl mx-auto">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-gray-900">报告管理</h2>
        <p className="text-gray-600">生成和管理各类ESG报告</p>
      </div>

      <div className="flex justify-between items-center mb-6">
        <div className="flex space-x-2">
          {['all', 'comprehensive', 'carbon', 'social'].map(filter => (
            <button
              key={filter}
              onClick={() => setActiveFilter(filter)}
              className={`px-4 py-2 rounded-lg text-sm ${
                activeFilter === filter ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'
              }`}
            >
              {filter === 'all' ? '全部' : filter === 'comprehensive' ? '综合报告' : 
               filter === 'carbon' ? '碳排放' : '社会责任'}
            </button>
          ))}
        </div>
        <button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center">
          <Plus className="h-4 w-4 mr-2" />
          生成报告
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {reports.map(report => (
          <div key={report.id} className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-start justify-between mb-4">
              <FileText className="h-8 w-8 text-blue-600" />
              <span className={`px-2 py-1 text-xs rounded-full ${
                report.status === 'published' ? 'bg-green-100 text-green-800' :
                report.status === 'draft' ? 'bg-gray-100 text-gray-800' :
                'bg-yellow-100 text-yellow-800'
              }`}>
                {report.status === 'published' ? '已发布' : 
                 report.status === 'draft' ? '草稿' : '审核中'}
              </span>
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">{report.name}</h3>
            <div className="text-sm text-gray-500 space-y-1">
              <div>日期: {report.date}</div>
              <div>大小: {report.size}</div>
            </div>
            <div className="mt-4 flex space-x-2">
              <button className="flex-1 bg-gray-100 text-gray-700 py-2 px-3 rounded text-sm hover:bg-gray-200">
                <Eye className="h-4 w-4 mx-auto" />
              </button>
              <button className="flex-1 bg-blue-100 text-blue-700 py-2 px-3 rounded text-sm hover:bg-blue-200">
                <Download className="h-4 w-4 mx-auto" />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Reports; 